<template>
  <view class="container">
    <!-- 用户信息卡片 -->
    <view class="user-card">
      <image 
        :src="userStore.userNextInfo.avatar || '/static/default-avatar.png'" 
        class="avatar"
        mode="aspectFill"
      />
      <view class="user-meta">
        <text class="nickname">{{ userStore.userNextInfo.name || '未登录用户' }}</text>
        <view class="badge-group">
          <text class="vip-badge">VIP 3</text>
          <text class="level-badge">Lv.12</text>
        </view>
      </view>
    </view>

    <!-- 功能入口网格 -->
    <view class="grid-container">
      <view 
        v-for="(item, index) in menuItems" 
        :key="index" 
        class="grid-item"
        @click="handleMenuClick(item.path)"
      >
        <view class="icon-wrapper" :style="{ backgroundColor: item.color }">
          <uni-icons :type="item.icon" size="28" color="#fff"></uni-icons>
        </view>
        <text class="grid-label">{{ item.label }}</text>
      </view>
    </view>

    <!-- 列表式菜单 -->
    <view class="menu-list">
      <view 
        v-for="(item, index) in listItems"
        :key="index"
        class="menu-item"
        @click="handleMenuClick(item.path)"
      >
        <view class="menu-left">
          <uni-icons :type="item.icon" size="20" :color="item.color"></uni-icons>
          <text class="menu-label">{{ item.label }}</text>
        </view>
        <uni-icons type="right" size="16" color="#999"></uni-icons>
      </view>
    </view>
  </view>
</template>

<script>
import { useUserStore } from '../../store/user';
const userStore = useUserStore();

export default {
  setup() {
    return { userStore }
  },
  data() {
    return {
      menuItems: [
        { label: '社区', icon: 'paperplane', color: '#ff6b6b', path: '/subpkgMore/community/community' },
        { label: '设置', icon: 'gear', color: '#2ac2d1', path: '/subpkgMore/settings/settings' },
        { label: '反馈', icon: 'chat', color: '#f6b93b', path: '/subpkgMore/feedback/feedback' },
        { label: '客服', icon: 'headphones', color: '#6c5ce7', path: '/subpkgMore/customer/customer' }
      ],
      listItems: [
        { label: '关于我们', icon: 'info', color: '#2ac2d1', path: '/subpkgMore/about/about' },
        { label: '隐私政策', icon: 'locked', color: '#e84393', path: '/subpkgMore/privacy/privacy' },
        { label: '版本更新', icon: 'reload', color: '#00b894', path: '/subpkgMore/update/update' }
      ]
    }
  },
  methods: {
    handleMenuClick(path) {
      uni.navigateTo({ url: path })
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  padding: 30rpx;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  min-height: 100vh;
}

.user-card {
  display: flex;
  align-items: center;
  padding: 40rpx;
  background: #fff;
  border-radius: 24rpx;
  box-shadow: 0 10rpx 30rpx rgba(0,0,0,0.05);
  margin-bottom: 40rpx;

  .avatar {
    width: 120rpx;
    height: 120rpx;
    border-radius: 50%;
    margin-right: 30rpx;
    border: 4rpx solid #fff;
    box-shadow: 0 8rpx 20rpx rgba(0,0,0,0.1);
  }

  .user-meta {
    flex: 1;

    .nickname {
      font-size: 36rpx;
      font-weight: 600;
      color: #2d3436;
      display: block;
      margin-bottom: 16rpx;
    }

    .badge-group {
      display: flex;
      gap: 16rpx;

      .vip-badge, .level-badge {
        padding: 8rpx 20rpx;
        border-radius: 40rpx;
        font-size: 24rpx;
      }

      .vip-badge {
        background: linear-gradient(45deg, #ff7675, #d63031);
        color: #fff;
      }

      .level-badge {
        background: #dfe6e9;
        color: #636e72;
      }
    }
  }
}
.grid-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30rpx;
  margin-bottom: 40rpx;

  .grid-item {
    background: #fff;
    border-radius: 16rpx;
    padding: 30rpx 0;
    text-align: center;
    transition: transform 0.3s ease;

    &:active {
      transform: scale(0.95);
    }

    .icon-wrapper {
      width: 80rpx;
      height: 80rpx;
      border-radius: 50%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 20rpx;
    }

    .grid-label {
      font-size: 26rpx;
      color: #2d3436;
    }
  }
}

.menu-list {
  background: #fff;
  border-radius: 24rpx;
  overflow: hidden;
  box-shadow: 0 10rpx 30rpx rgba(0,0,0,0.05);

  .menu-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 32rpx 40rpx;
    border-bottom: 1rpx solid #f1f3f5;

    &:last-child {
      border-bottom: none;
    }

    .menu-left {
      display: flex;
      align-items: center;
      gap: 20rpx;

      .menu-label {
        font-size: 30rpx;
        color: #2d3436;
      }
    }
  }
}
</style>